import React, { Component, Suspense } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom';
import { RouterItem } from '../types/router.d'
interface IPROPS {
  routes: RouterItem[]
}
export default class RouterView extends Component<IPROPS> {
  render() {
    const { routes } = this.props
    return (
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
          <Switch>
            {
              routes.map((item, index) => {
                return <Route
                  key={index}
                  path={item.path}
                  render={(props) => {
                    return item.to ?
                      <Redirect to={item.to}></Redirect> :
                      <item.component {...props} children={item.children}></item.component>
                  }}></Route>
              })
            }
          </Switch>
        </Switch>
      </Suspense>

    )
  }
}
